<template>
  <myLeftRightLaout>
    <template v-slot:leftL>
      <myList height="100%" width="100%" :listData="listData"></myList>
    </template>
    <template v-slot:rightL>
      <div>
     <div class="x">
      <iframe src="/vue2.html" frameborder="0" width="100%" height="50px"></iframe>
      <img style="margin: 0 auto;" src="../../assets/recover.jpg" width="50%" height="300px" alt="">
      <img style="margin: 0 auto;" src="../../assets/update.jpg" width="50%" height="300px" alt="">
      <div>描述：
        vue2的响应式主要是通过数据劫持和订阅发布实现,在oberver阶段中实例化数据主题,并通过object.defineProtity实现数据劫持
        。在compiler阶段实例化watcher,并把watcher放在dep.target上,此阶段会触发get(),get中收集此watcher。修改数据时会触发set，
        set中遍历所有和属性相关的依赖,最后更新数据。
      </div>
     </div>
      </div>
    </template>
  </myLeftRightLaout>


</template>

<script setup lang="ts">
import myLeftRightLaout from '@/components/myLeftRightLaout/index.vue'
import myList from "@/components/myList/index.vue";
const listData = [
  {label:'实现响应式'},
  {label:'diff原理'}
]
</script>
